<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-26 15:16:08
 * @LastEditTime: 2020-08-18 15:51:13
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="container">
    <div class="list">
      <div class="item" v-for="item in list" :key="item.typeId">
        <div class="l_title">{{item.type}}</div>
        <div class="l_item_box">
          <div class="l_item" v-for="l_item in item.list" :key="l_item.lId">
            <div
              class="btn"
              @click.stop="Select(l_item,item.list)"
              :class="{active:l_item.selected}"
            >{{l_item.item}}</div>
          </div>
        </div>
      </div>
    </div>
    {{selectedList}}
  </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    type: "生活",
                    typeId: "01",
                    list: [
                        { lId: "011", item: "吃饭" },
                        { lId: "012", item: "吃糖" },
                        { lId: "013", item: "睡觉" },
                        { lId: "014", item: "洗漱" }
                    ]
                },
                {
                    type: "日常",
                    typeId: "02",
                    list: [
                        { lId: "021", item: "看书" },
                        { lId: "022", item: "学习" }
                    ]
                },
                {
                    type: "休闲",
                    typeId: "03",
                    list: [
                        { lId: "031", item: "跑步" },
                        { lId: "032", item: "游戏" }
                    ]
                }
            ],
            selectedList: []
        };
    },
    methods: {
        Select(item, list) {
            // 选中后可取消选中
            item.selected = !item.selected;
            this.$forceUpdate();
            this.getSelectedList();
        },
        // 已选中的数组
        getSelectedList() {
            let list = [];
            this.list.forEach(item => {
                let selected_item = item.list.filter(
                    item_ => item_.selected == true
                );
                list = list.concat(selected_item);
            });
            this.selectedList = list;
        }
    }
};
</script>
<style scoped lang="less">
.container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 24px;
    overflow: auto;
}
.l_title {
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
    padding: 10px;
}
.l_item_box {
    display: flex;
    flex-wrap: wrap;
    .l_item {
        width: 33%;
        height: 100px;
        box-sizing: border-box;
        padding: 10px;
        .btn {
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
            height: 100%;
            border-radius: 6px;
            background-color: #eee;
            color: #2c3e50;
            font-size: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 4px solid transparent;
        }
        .active {
            border: 4px solid #2185bf;
        }
    }
}
</style>
